<template>
<!-- :style="{left:radarAttrObj.pixel.x+'px',top:radarAttrObj.pixel.y+'px'}" -->
  <div class="attributive-analysis" v-drag  v-if="radarAttrObj">
    <div class="title" >
        <span>雷达监控</span>
        <span class="close" @click="handleClose">x</span>
    </div>
    <div class="content">
      <!-- <div class="radar-box">
        <span>类别：</span>
          <el-select 
          size='mini'
          style="width:100px"
          v-model="currentSelect" 
          placeholder="请选择" 
          @change="handleChange" >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
      </div> -->
       <div class="radar-box" v-show="currentSelect == 'radar'">
        <span>经度：</span>
        <el-input v-model="longitude" 
        size="mini"
        style="width:100px"></el-input>
      </div>
       <div class="radar-box" v-show="currentSelect == 'radar'">
        <span>纬度：</span>
        <el-input v-model="latitude" 
        size="mini"
        style="width:100px"></el-input>
      </div>
      <div class="radar-box" v-show="currentSelect == 'radar'">
        <span>半径：</span>
        <el-input v-model="radius" 
        size="mini"
        style="width:100px"></el-input>
      </div>
    </div>
    <div class="btn">
      <el-button size="mini" type="primary" @click="addRadar">确定</el-button>
    </div>
  </div>
</template>

<script>
import {Store} from '../../utils/store'
import * as cesium from 'cesium/Cesium'
const Cesium = cesium
export default {
  props:['radarAttrObj'],
  data() {
    return {
      currentSelect:'radar',
        radius:5000,
        longitude:'',
        latitude:'',
        options:[
          {label:'雷达',value:'radar'},
          {label:'动态墙体',value:'wall'},
        ]
    };
  },
  computed: {},
  watch: {
    radarAttrObj:{
      handler(newVal){
        console.log(newVal,4444)
        this.longitude=newVal.position.longitude;
        this.latitude=newVal.position.latitude
      },
      deep:true
    }
  },
  mounted() {
    console.log(this.radarAttrObj,123456)
  },
  methods: {
      handleClose(){
          this.$emit('closeRadarAttr')
      },
      handleChange(val){
        console.log(val,4444)
      },
      addRadar(){
        let mapControl=Store.oneGis();
        let position=Cesium.Cartesian3.fromDegrees( this.longitude, this.latitude, 0)
        console.log(position,55555)
        mapControl.plugins.radarManage.handleDrawEllipsoid(position,this.radius)
      }
  },
  created() {}
};
</script>
<style lang="less" scoped>
.attributive-analysis{
    width: 200px;
    height:auto;
    padding-bottom: 10px;
    background: rgba(0, 0, 0,0.5);
    position: absolute;
    right: 100px ;
    top: 100px;
    z-index: 5;
    color: #fff;
 .title{
     height: 40px;
     font-size: 14px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
     border-bottom: 1px solid #fff;
     .close{
         cursor: pointer;
     }
 }
 .content{
   padding: 20px;
   .radar-box{
      display: flex;
   align-items: center;
   margin-bottom: 10px;
   }
 }
   .btn{
     padding: 0 10px;
     text-align: right;
   }
}
</style>
